<style>
	.contacts img {
		height: 2em;
	}
	.contacts ul {
		list-style-type: none;
	}

	.contact {
		cursor: pointer;
		min-height: 40px;
	}
</style>

<textarea name="editor1" id="editor1" cols="30" rows="10">
	<p>Drop contacts here.</p>
	<p>Or here.</p>
</textarea>
<div class="contacts">
	<h3>List of Droppable Contacts</h3>
	<ul id="contactList"></ul>
</div>

<script>
	/**
	 * Test inspired by the SDK "Drag & Drop" sample.
	 * */

	if ( !CKEDITOR.env.edge ) {
		bender.ignore();
	}

	var CONTACTS = [
		{ name: 'Huckleberry Finn',			tel: '+48 1345 234 235', email: 'h.finn@example.com', avatar: 'hfin' },
		{ name: 'D\'Artagnan',				tel: '+45 2345 234 235', email: 'dartagnan@example.com', avatar: 'dartagnan' },
		{ name: 'Phileas Fogg',				tel: '+44 3345 234 235', email: 'p.fogg@example.com', avatar: 'pfog' },
		{ name: 'Alice',					tel: '+20 4345 234 235', email: 'alice@example.com', avatar: 'alice' },
		{ name: 'Little Red Riding Hood',	tel: '+45 2345 234 235', email: 'lrrh@example.com', avatar: 'lrrh' },
		{ name: 'Winnetou',					tel: '+44 3345 234 235', email: 'winnetou@example.com', avatar: 'winetou' },
		{ name: 'Edmond Dantès',			tel: '+20 4345 234 235', email: 'count@example.com', avatar: 'edantes' },
		{ name: 'Robinson Crusoe',			tel: '+45 2345 234 235', email: 'r.crusoe@example.com', avatar: 'rcrusoe' }
	];

	CKEDITOR.plugins.add( 'hcard', {
		requires: 'widget',

		init: function( editor ) {
			editor.widgets.add( 'hcard', {
				allowedContent: 'span(!h-card); a[href](!u-email,!p-name); span(!p-tel)',
				requiredContent: 'span(h-card)',
				pathName: 'hcard',

				upcast: function( el ) {
					return el.name == 'span' && el.hasClass( 'h-card' );
				}
			} );

			// This feature does not have a button, so it needs to be registered manually.
			editor.addFeature( editor.widgets.registered.hcard );

			// Handle dropping a contact by transforming the contact object into HTML.
			// Note: All pasted and dropped content is handled in one event - editor#paste.
			editor.on( 'paste', function( evt ) {
				var contact = evt.data.dataTransfer.getData( 'contact' );
				if ( !contact ) {
					return;
				}

				evt.data.dataValue =
					'<span class="h-card">' +
					'<a href="mailto:' + contact.email + '" class="p-name u-email">' + contact.name + '</a>' +
					' ' +
					'<span class="p-tel">' + contact.tel + '</span>' +
					'</span>';
			} );
		}
	} );

	CKEDITOR.on( 'instanceReady', function() {
		// When an item in the contact list is dragged, copy its data into the drag and drop data transfer.
		// This data is later read by the editor#paste listener in the hcard plugin defined above.
		CKEDITOR.document.getById( 'contactList' ).on( 'dragstart', function( evt ) {
			// The target may be some element inside the draggable div (e.g. the image), so get the div.h-card.
			var target = evt.data.getTarget().getAscendant( 'div', true );

			CKEDITOR.plugins.clipboard.initDragDataTransfer( evt );

			var dataTransfer = evt.data.dataTransfer;

			dataTransfer.setData( 'contact', CONTACTS[ target.data( 'contact' ) ] );

			dataTransfer.setData( 'text/html', target.getText() );

			if ( dataTransfer.$.setDragImage ) {
				dataTransfer.$.setDragImage( target.findOne( 'img' ).$, 0, 0 );
			}
		} );
	} );

	CKEDITOR.replace( 'editor1', {
		extraPlugins: 'hcard',
		imageUploadUrl: 'http://sub.ckeditor.dev/'
	} );

	addItems(
		CKEDITOR.document.getById( 'contactList' ),
		new CKEDITOR.template(
			'<div class="contact h-card" data-contact="{id}">' +
			'<img src="/tests/_assets/lena.jpg" alt="avatar" class="u-photo" /> {name}' +
			'</div>'
		),
		CONTACTS
	);

	function addItems( listElement, template, items ) {
		for ( var i = 0, draggable, item; i < items.length; i++ ) {
			item = new CKEDITOR.dom.element( 'li' );
			draggable = CKEDITOR.dom.element.createFromHtml(
				template.output( {
					id: i,
					name: items[ i ].name,
					avatar: items[ i ].avatar
				} )
			);
			draggable.setAttributes( {
				draggable: 'true',
				tabindex: '0'
			} );

			item.append( draggable );
			listElement.append( item );
		}
	}
</script>
